<template>
  <div class="title-bar" >
    <div class="title-bar-bg" :style="style"></div>
    <FlexBox justify="space-between" class="part-1" center-v >
      <div @click="addCity">
        <ImageBox :src="require('@/assets/icon/add.png')" size="20"/>
      </div>
      <div class="position">
        宝安区 爱民路
      </div>
      <div>
        <ImageBox :src="require('@/assets/icon/more.png')" size="22"/>
      </div>
    </FlexBox>

    <flex-box class="part-2" center-h-v>
      <image-box class="icon" :src="require('@/assets/icon/weather/fengli.png')" size="8" />
      <div class="dot" />
      <div class="dot" />
      <div class="dot" />
    </flex-box>
  </div>
</template>

<script>
import FlexBox from "@/components/flex-box/index";
import ImageBox from "@/components/image-box/index";
import getDaytimeChange from '@/mixins/getDaytimeChange';
import eventBus from "@/util/eventBus";
import eventBusMap from "@/config/constant/eventBusMap";
import { mapGetters, mapMutations, mapState } from 'vuex';

export default {
  name: "TitleBar",
  mixins: [getDaytimeChange],
  components: {ImageBox, FlexBox},
  data() {
    return {
      bgColor: null,
      titleBgImage: null,
      opacity: 0,
      // height: 100 + '%'
    }
  },
  computed: {
    ...mapGetters(['changeMode', 'currentTheme']),
    ...mapState({
      bgImageState: state => {
        return state.bgImage
      }
    }),
    style() {
      return {
        backgroundColor: this.bgColor,
        backgroundImage: this.bgImageState,
        opacity: this.opacity,
        height: this.height,
      }
    },
  },
  methods: {
    ...mapMutations(['setBgImage']),
    addCity() {
      console.log("点击了添加城市");
      eventBus.$emit(eventBusMap.showAddCityPage, true);
    },
    handleScroll() {
      let {scrollY, innerHeight} = window;
      let opacity = scrollY / innerHeight * 4;
      if (window.scrollY >= 112) {
        this.opacity = opacity;
      }else {
        this.opacity = opacity;
      }
      if (scrollY > 288) {
        // if(this.changeMode === 1) { // 天气变化模式是跟随时间自动变化时才调用
        //   this.getDayState();
        // }
        // this.setBgImage('linear-gradient(120deg, #6190e8 0%, #a7bfe8 100%)');
        this.titleBgImage = this.bgImageState;
        // this.getDayState();
      }else  {
        this.titleBgImage = null;
      }
    }
  },

  created() {
    this.getDayState();
    window.addEventListener('scroll', this.handleScroll)
  },

  mounted() {

  },

  beforeDestroy() {
    console.log('weather.vue beforeDestroy');
    window.removeEventListener('scroll', this.handleScroll);
  }

}
</script>

<style lang="scss" scoped>
.title-bar {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 91px;
  z-index: 1000;
  background-size: 100% 100vh;
  .title-bar-bg {
    position: fixed;
    left: 0;
    top: 0;
    // padding: 0 20px;
    width: 101%;
    height: 91px;
    z-index: -1;
    background-size: 100% 100vh;
    background-clip: content-box;
    box-sizing: border-box;
  }

  .part-1 {
    margin-top: 50px;
    padding: 0 20px;

    .position {
      font-size: 20px;
      font-weight: 600;
    }
    @media screen and (min-width: 540px) {
      width: 375px;
      margin: 0 auto;
      padding: 0 20px;
    }
  }

  .part-2 {
    margin-top: 4px;
    .icon {
      margin-right: 10px;
    }
    .dot {
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background-color: rgba(255, 255, 255, .5);
      margin-right: 10px;
    }
  }
}
</style>
